<template>
  <view class="tag-list">
    <view v-for="tag in TAG_LIST" :key="tag.value" class="tag-item">
      <view class="tag-item_icon" :class="['tag_' + tag.value]"></view>
      <view class="tag-item_label"> {{ tag.label }}</view>
    </view>
  </view>
</template>
<script setup>
  // 0:空闲车辆,1:线下订单占用,2:渠道订单占用,3:维修、保养、年检,4:逾期未还,5:车辆冲突,6:丢失
  const TAG_LIST = [
    {
      value: '0',
      label: '无占用车辆',
      total: 0,
    },
    {
      value: '1',
      label: '线下订单占用',
      total: 0,
    },
    {
      value: '2',
      label: '渠道订单占用',
      total: 0,
    },
    {
      value: '7',
      label: '临时占用',
      total: 0,
    },
    {
      value: '8',
      label: '已借出',
      total: 0,
    },
    {
      value: '3',
      label: '维修',
      total: 0,
    },
    {
      value: '4',
      label: '逾期未还',
      total: 0,
    },
    {
      value: '5',
      label: '车辆冲突',
      total: 0,
    },
    {
      value: '9',
      label: '借出未还',
      total: 0,
    },
    // {
    //   value: '6',
    //   label: '丢失',
    //   total: 0,
    // },
  ]
</script>

<style lang="scss" scoped>
  .tag-list {
    margin: 24rpx;
    padding: 24rpx 24rpx 6rpx;
    background: #ffffff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;

    display: flex;
    flex-wrap: wrap;
    .tag-item {
      display: flex;
      height: 52rpx;
      width: 50%;
      align-items: center;
      font-size: 28rpx;
      color: #191c27;
      margin-bottom: 20rpx;
      padding: 0 12rpx;

      &_icon {
        width: 24rpx;
        height: 24rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        margin-right: 16rpx;
      }
      &.actived {
        background: #e8f3ff;
        color: #376eff;
      }
    }

    // 空闲可租
    .tag_0 {
      background: #ffffff;
      border: 2rpx solid #e5e5e5;
    }
    // 线下订单占用
    .tag_1 {
      background: #79ba4e;
    }
    // 渠道订单占用
    .tag_2 {
      background: #376eff;
    }
    // 维修、保养、年检,
    .tag_3 {
      background: #f4c72e;
    }
    // 逾期未还
    .tag_4 {
      background: #6352ff;
    }
    // 车辆冲突
    .tag_5 {
      background: #ff4f65;
    }
    // 车辆丢失
    .tag_6 {
      background: #8790a3;
    }
    // 7:临时占用
    .tag_7 {
      background: #ffca4f;
    }
    // 8:已借出
    .tag_8 {
      background: #6edbd7;
    }
    // 9:借出未还
    .tag_9 {
      background: #ff4fb0;
    }
  }
</style>
